import React, { } from 'react'
import styled from 'styled-components'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.less'
import SwiperCore, { Pagination, Autoplay, Lazy } from 'swiper'
SwiperCore.use([Pagination, Autoplay, Lazy])

export default function MySwiper(props) {

    return (
        <MySwiperStyle>
            <Swiper tag="section" wrapperTag="ul"
                slidesPerView={'auto'}
                onSwiper={swiper => console.log(swiper, '实例===')}
                // onSlideChange={() => { console.log('slide change ') }}
                pagination={{ clickable: true }}
                autoplay={{
                    delay: props.time,
                    disableOnInteraction: false
                }}
                loop={ true }
            >
                {
                    props?.data?.map((item, key) => {
                        return (
                            <SwiperSlide tag="li" key={key + item.thumb} >
                                <img
                                    className="slide-img"
                                    src={'https://res.lexiangpingou.cn/' + item.thumb}
                                    alt={item.name}
                                />
                            </SwiperSlide>

                        )
                    })
                }
            </Swiper>

        </MySwiperStyle>
    )
}


const MySwiperStyle = styled.div`
    .swiper-container{
        border-radius: .15rem;
        width: 100%;
        height: 5.99rem;
        .slide-img{
            border-radius: .15rem;
            width: 100%;
            height: 100%;
        }

        --swiper-theme-color: #ff762e;

    }


`

